<template>
  <div class="content">
    <div class="home">
     <el-carousel :interval="5000" class="carousel">
        <el-carousel-item v-for="(item,index) in Image" :key="index" style="width:1200px;height:450px">
          <img style="width:100%" :src="item" alt="" srcset="">
        </el-carousel-item>
      </el-carousel>
    <div class="store-item">
      <template class="phone">
        <Card :dataList="['手机',['热门','手机壳']]" ref="phoneData"></Card>
        <GoodsItem :datalist="mobilePhoneData" :goodsType="'phone'" :pageType="'home'"></GoodsItem>
      </template>
      <template class="house-utensil">
        <Card :dataList="['家电',['热门','电视音影']]"></Card>
        <GoodsItem :datalist="houseAppliancesData" :goodsType="'houseUtensil'" :pageType="'home'"></GoodsItem>
      </template>
      <template class="house-utensil">
        <Card :dataList="['配件',['热门','保护套','充电器']]"></Card>
        <GoodsItem :datalist="accessoryData" :goodsType="'Accessory'" :pageType="'home'"></GoodsItem>
      </template>
    </div>
    <div class="model-view">
      <div class="view">
        <router-view></router-view>
      </div>
    </div>
  </div>
  </div>
</template>

<script>
import GoodsItem from '../components/goods/goodsItem.vue'
import Card from '../components/Card.vue'
export default {
  data() {
    return {
      Image:[
        require('../static/imgs/cms_1.jpg'),
        require('../static/imgs/cms_2.jpg'),
        require('../static/imgs/cms_3.jpg'),
        require('../static/imgs/cms_4.jpg')
      ],
      screenWidth:document.body.clientWidth,
      mobilePhoneData:[], //手机数据
      houseAppliancesData:[] ,//家电数据
      accessoryData:[],//配件数据
    };
  },
  components: {
    GoodsItem,
    Card
  },
  mounted(){
    const _this = this
    const pageNumber = 1
    const pageSize = 10
    const mobilePhoneData2 = this.mobilePhoneData
    const houseAppliancesData2 = this.houseAppliancesData
    const accessoryData2 = this.accessoryData
    this.$bus.$on('pop',(data)=>{
      if(data.type =='手机' && data.item == '手机壳'){
        const goods_types = 5
        this.$http.get('/goods/goods',{params:{pageNumber,pageSize,goods_types}}).then((res)=>{
          _this.mobilePhoneData = res.data.result.list
        })
      }else if(data.type =='手机' && data.item == '热门'){
        this.mobilePhoneData = mobilePhoneData2
      }

      if(data.type =='家电' && data.item == '电视音影'){
        const goods_types = 1
        this.$http.get('/goods/goods',{params:{pageNumber,pageSize,goods_types}}).then((res)=>{
          _this.houseAppliancesData = res.data.result.list
        })
      }else if(data.type =='家电' && data.item == '热门'){
        this.houseAppliancesData = houseAppliancesData2
      }

      if(data.type =='配件' && data.item == '保护套'){
        const goods_types = 4
        this.$http.get('/goods/goods',{params:{pageNumber,pageSize,goods_types}}).then((res)=>{
          _this.accessoryData = res.data.result.list
        })
      }else if(data.type =='配件' && data.item == '充电器'){
        const goods_types = 6
        this.$http.get('/goods/goods',{params:{pageNumber,pageSize,goods_types}}).then((res)=>{
          _this.accessoryData = res.data.result.list
        })
      }else if(data.type =='配件' && data.item == '热门'){
        this.accessoryData = accessoryData2
      }
    })
  },
  created(){
    this.getList()
    this.$on('pop',(res)=>{
      console.log(res);
    })
  },
  methods:{
    getList(){
      this.$http.get('/goods/goodsHome').then((res)=>{
        this.Data = res.data.result.list
        res.data.result.list.forEach((item,index)=>{
          const type = item.goods_type
          switch(type){
            case 0:
              this.mobilePhoneData.push(item);
              break
            case 1:
              this.houseAppliancesData.push(item);
              break
            case 2:
              this.accessoryData.push(item)
              break
          }
        })
      })
    },
    change(){
      console.log("8888");
    }
  }
};
</script>

<style scoped>
.content{
  display: flex;
  justify-content: center;
  align-items: center;
}
.home{
  width: 80%;
  margin-bottom: 20px;
}
.store-item{
  margin-top: 40px;
}
.carousel{
  height: 460px;
  margin-top: 20px;
}
.Goods-item{
  display: flex;
}
::v-deep .el-carousel__arrow--left{
  top: 220px;
}
::v-deep .el-carousel__arrow--right{
  top: 220px;
}
</style>